<template>
  <div class="dashboard-container">
    <!-- 面板统计组件 -->
    <panel-group
      :userTotal="userTotal"
      :articleTotal="articleTotal"
      :questionTotal="questionTotal"
    />

    <el-row :gutter="40">
      <el-col :xs="24" :sm="24" :lg="12">
        <el-card>
          <!-- 饼状图： 各技术频道文章统计 -->
          <pieChart
            v-if="flag"
            :seriesData="categoryTotal.nameAndValueList"
            :legendData="categoryTotal.nameList"
          />
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <el-card>
          <!-- 柱状图： 近6个月发布的文章数 -->
          <barchart
            v-if="flag"
            :xAxisData="monthAritcleTotal.yearMonthList"
            :seriesData="monthAritcleTotal.aritcleTotalList"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ApiGetUserTotal, ApiGetArticleTotal, ApiGetQuestionTotal, ApiGetCategoryTotal, ApiGetMonthArticleTotal } from '@/api/home'
import pieChart from './components/pieChart.vue'
import barchart from './components/barChart.vue'
import panelGroup from './components/panelGroup.vue'
export default {
  name: 'Dashboard',
  components: {
    pieChart,
    barchart,
    panelGroup
  },
  data () {
    return {
      userTotal: 0, // 总用户
      articleTotal: 0, // 总文章
      questionTotal: 0, // 总提问
      flag: false, //是否显示子组件，加载数据完成后
      categoryTotal: {}, // 每个分类下的文章数
      monthAritcleTotal: {} // 查询近6个月发布的文章数
    }
  },
  created () {
    this.getTotal()
    this.getArticleTotal()
  },
  methods: {
    async getTotal () {
      // 总用户
      const { data: userTotal } = await ApiGetUserTotal()
      this.userTotal = userTotal
      // 总文章
      const { data: articleTotal } = await ApiGetArticleTotal()
      this.articleTotal = articleTotal
      // 总提问
      const { data: questionTotal } = await ApiGetQuestionTotal()
      this.questionTotal = questionTotal
    },
    async getArticleTotal () {
      const { data: categoryTotal } = await ApiGetCategoryTotal()
      this.categoryTotal = categoryTotal

      const { data: monthAritcleTotal } = await ApiGetMonthArticleTotal()
      console.log('monthAritcleTotal', monthAritcleTotal);
      this.categoryTotal = monthAritcleTotal
      this.flag = true  // 显示组件
    }
  },
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
